<template>
	<diV class="notify" v-if="msg" :style="{color:color,backgroundColor:bgcolor}">
		{{msg}}
	</diV>
</template>

<style>
	.notify {
		height: 44px;
		line-height: 44px;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		text-align: center;
	}
</style>


<script>
	export default {
		data() {
			return {
				// 通知的文本
				msg: "",
				// 文本颜色
				color: "#fff",
				// 背景颜色
				bgcolor: "090"
			}
		},
		methods: {
			// 显示通知
			show(msg, bgcolor = "#090", color = "#fff") {
				this.msg = msg;
				this.bgcolor = bgcolor;
				this.color = color;
				setTimeout(() => {
					this.hide();
				}, 2000)
			},
			hide() {
				this.msg = ""
			},
			// 成功
			success(msg) {
				this.show(msg, "#090")
			},
			// 失败
			danger(msg) {
				this.show(msg, "#FF5500")
			},
			// 警告
			warning(msg) {
				this.show(msg, "#ffd606")
			}
		}
	}
</script>
